<template>
  <div class="box-bg" @click="cancel" v-show="showRef">
    <div
      class="box"
      v-show="showRef"
      @click.stop="() => {}"
      :style="{ width: props.width,height:props.height }"
    >
      <div>{{ props.title }}<slot></slot></div>
      <div class="button">
        <Button  color="#3644BF" :size="`.08rem`"  class="cancel thumb" @click="cancel">取消</Button>
        <Button  background="#3644BF" :size="`.08rem`"   :loading="loadingStatus"  class="confirm thumb" @click="confirm">确定</Button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref,watch } from "vue";
import Button from "@/components/Button/index.vue";
interface Props {
  show?: boolean;             //是否显示确认框
  title?: string;             //确认框标题
  width?: string;             //确认框宽度
  height?:string;             //确认框高度
  cancelText?:string;         //取消文本
  confirmText?:string;        //确认文本
  loading?:boolean;           //按钮是否loading
}
const props = withDefaults(defineProps<Props>(), {
  show: false,
  width: "250px",
  height:"auto",
  title: ``,
  cancelText:`取消`,
  confirmText:`确定`,
  loading:false
});
const loadingStatus = ref<boolean>(props.loading);
watch(()=>props.loading,(newValue)=>loadingStatus.value = newValue);
watch(()=>props.show,(newValue)=>showRef.value = newValue);
const emits = defineEmits<{
    (event:'update:show',value:boolean):void
    (event:'confirm'):void
}>()
const showRef = ref<boolean>(props.show);


const cancel = ()=>{
    emits("update:show",false)
}      
const confirm = ()=>{
    emits("update:show",false)
    emits("confirm")
}      
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./index.scss";
}
</style>
